<script setup lang="ts">
import {onMounted, ref, computed} from "vue";
import {Toast} from 'vant';
import {useRouter, useRoute} from 'vue-router'
import myAxios from "../../plugins/myAxios.ts";

const currentRate = ref(10);
const text = computed(() => currentRate.value.toFixed(0) + '%');
const router = useRouter()
const route = useRoute()
const taskInfo = ref({
  taskCode: '',
  taskName: '',
  isSql: '0',
  isDms: '0',
  environment: '开发中',
  plan: 0,
});


onMounted(async () => {
  // 获取路径参数
  const id = route.params.id;
  // 获取查询参数
  const queryParam = route.query;
  console.log('Path parameter:', id);
  console.log('Query parameter:', queryParam);
  taskInfo.value.taskCode = queryParam.taskCode as string;
  taskInfo.value.taskName = queryParam.taskName as string;
  taskInfo.value.isSql = queryParam.isSql as string;
  taskInfo.value.isDms = queryParam.isDms as string;
  taskInfo.value.environment = queryParam.environment as string;
  taskInfo.value.plan = Number(queryParam.plan);
  // 可以在这里执行其他与这些参数相关的逻辑
});

const onSubmit = (values: any) => {
  console.log('submit', JSON.stringify(values));
  let data = values;
  myAxios.post('/task/update', {
    taskCode: data.taskCode,
    taskName: data.taskName,
    isSql: data.isSql,
    isDms: data.isDms,
    environment: data.environment,
    plan: data.plan
  }).then(function (response) {
    const data = response.data
    console.log("更新返回内容" + JSON.stringify(data))
    if (data.data == null || data.code !== 200) {
      return Toast.fail(data.message);
    } else {
      router.push('/task')
    }
  })


};
</script>

<template>
  <van-form @submit="onSubmit(taskInfo)">
    <van-cell-group inset>
      <!--  SRQ-->
      <van-field label-align="center"
                 v-model="taskInfo.taskCode"
                 name="SRQ"
                 label="任务"
                 placeholder="SRQ"
                 :rules="[{ required: true, message: '请输入 SRQ 靓仔！' }]"
      />
      <!--描述-->
      <van-field label-align="center"
                 v-model="taskInfo.taskName"
                 name="SRQ"
                 label="任务描述"
                 placeholder="SRQ"
                 :rules="[{ required: true, message: '请输入 描述！' }]"
      />

      <!--环境-->
      <van-field name="radio" label="环境" label-align="center">
        <template #input>
          <van-radio-group v-model="taskInfo.environment" direction="horizontal">
            <van-radio name="开发中">开发中</van-radio>
            <van-radio name="sit">sit</van-radio>
            <van-radio name="uat">uat</van-radio>
            <van-radio name="pre">pre</van-radio>
            <van-radio name="已上线">已上线</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!--SQL-->

      <van-field name="radio" label="SQL" label-align="center">
        <template #input>
          <van-radio-group v-model="taskInfo.isSql" direction="horizontal">
            <van-radio name="1"><img
                src="https://www.emojiall.com/images/240/telegram/telemoji-november-2023/2714-fe0f.gif"
                style="width: 50px; height: 50px;" alt="emoji"/></van-radio>
            <van-radio name="0"><img
                src="https://www.emojiall.com/images/240/openmoji/274c.png"
                style="width: 50px; height: 50px;" alt="emoji"/></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!--DMS-->
      <van-field name="radio" label="DMS" label-align="center">
        <template #input>
          <van-radio-group v-model="taskInfo.isDms" direction="horizontal">
            <van-radio name="1"><img
                src="https://www.emojiall.com/images/240/telegram/telemoji-november-2023/2714-fe0f.gif"
                style="width: 50px; height: 50px;" alt="emoji"/></van-radio>
            <van-radio name="0"><img
                src="https://www.emojiall.com/images/240/openmoji/274c.png"
                style="width: 50px; height: 50px;" alt="emoji"/></van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <!--进度    -->
      <van-field name="rate" label="进度" label-align="center">
        <template #input>
          <van-circle
              v-model:current-rate="currentRate"
              :rate="taskInfo.plan"
              :speed="100"
              :text="text"
          />

        </template>
      </van-field>

      <van-field name="rate" label-align="center" style="padding-left: 80px">
        <template #input>
          <van-button style="padding-left: 40px;padding-right: 40px" type="primary" plain hairline
                      @click="taskInfo.plan==100?100:taskInfo.plan+=10">+
          </van-button>
          <van-button style="padding-left: 40px;padding-right: 40px" type="danger" plain hairline
                      @click="taskInfo.plan==0?0:taskInfo.plan+=-10">-
          </van-button>
        </template>
      </van-field>

    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>

</template>

<style scoped>

</style>